<template>
	<view class="my-recommend">
		<view class="m-r-a-recruits">
			<view class="a-r-title">
				<view class="lin"></view>
				<view class="r-t-text">
					{{rulesValue.recommend_rule.title || ''}}
				</view>
				<view class="lin"></view>
			</view>
			<view class="a-r-recruits">
				<view class="r-com">
					<text class="r-c-text">{{rulesValue.recommend_rule.value || ''}}</text>
				</view>
			</view>
		</view>
		<view class="m-r-card">
			<view class="b-tag">
				<view class="b-tag-son b-tag-son1">
					<view class="b-tag-son-top">
						<text>{{data.total}}</text>人
					</view>
					<view class="b-tag-son-bottom">
						<text>已推荐</text>
					</view>
				</view>
				<view class="b-tag-son b-tag-son1">
					<view class="b-tag-son-top">
						<text>{{work_people_num}}</text>人
					</view>
					<view class="b-tag-son-bottom">
						<text>工作中</text>
					</view>
				</view>
				<view class="b-tag-son">
					<view class="b-tag-son-top">
						<text>{{total_money}}</text>人
					</view>
					<view class="b-tag-son-bottom">
						<text>累计金额</text>
					</view>
				</view>

			</view>
		</view>
		<template v-if="state">
			<view class="m-r-card1">
				<view class="r-c-th">
					<uni-row>
						<uni-col :span="6">姓名</uni-col>
						<uni-col :span="12">注册时间</uni-col>
						<uni-col :span="6">工作详情</uni-col>
					</uni-row>
				</view>
				<view class="r-c-td" v-if="data.tableData.length">
					<uni-row v-for="(item, index) in data.tableData" :key="item.id">
						<uni-col :span="6">{{item.real_name}}</uni-col>
						<uni-col :span="12">{{item.create_time}}</uni-col>
						<uni-col :span="6"> <text @click="cleanerWorkRecord(item.id)">查看</text> </uni-col>
					</uni-row>
					<uni-load-more :contentText="contentText" :status="data.status" @clickLoadMore="loadClick()">
					</uni-load-more>
				</view>
			</view>
		</template>
		<view
			style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;"
			v-else>
			<image :src="zanwudingdan" mode="widthFix" style="width: 360rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin: 50rpx 0 150rpx;">暂无数据!</text>
		</view>
		<!-- 详情弹框 -->
		<view class="popup">
			<uni-popup type="center" ref="recommendPopup" @change="recommendPopupChange">
				<view class="popup-box">
					<uni-card :is-shadow="false" :border="false" :padding="0" :margin="0">
						<view class="popup-auto">
							<view class="recommendPopup-title">
								<view class="hotelName">
									<text>酒店名称</text>
								</view>
								<view class="workTime">
									<text>工作时间</text>
								</view>
							</view>
							<view class="" v-if="cleanerWorkList.length">
								<view class="popup-content" v-for="obj in cleanerWorkList" :key="obj.id">

									<view class="popup-content-son">
										<text>{{obj.hotel_name}}</text>
									</view>
									<view class="popup-content-son">
										<text>{{obj.create_time}}</text>
									</view>
								</view>
								<uni-load-more iconType="auto" :status="data1.status" @clickLoadMore="clickLoadMore1"
									:content-text="contentText1" />
							</view>
							<view class="zanwu" v-else>
								<text>暂无记录</text>
							</view>
						</view>
					</uni-card>
				</view>
			</uni-popup>
		</view>
		<!-- 详情弹框 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				zanwudingdan: `${getApp().globalData.imgScr}bj/zanwudingdan.png`,
				cleaner_id: 0,
				state: true,
				work_people_num: 0, //工作人数
				total_money: 0, //累计收益  
				data: {
					tableData: [],
					page: 1, // 初始页码
					total: 0, // 数据总条数
					status: 'more', // 加载更多组件的状态  more：加载前 loading：加载中 noMore：没有更多数据
				},
				rulesValue:{}, //活动规则,
				data1: {
					tableData: [],
					page: 1, // 初始页码
					total: 0, // 数据总条数
					status: 'more', // 加载更多组件的状态  more：加载前 loading：加载中 noMore：没有更多数据
				},
				cleanerWorkList: [], // 详情列表
				contentText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}, // 加载更多组件的提示文本
				// 详情的
				contentText1: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}, // 加载更多组件的提示文本
				total1: 0, // 详情数据总条数
			}
		},
		onLoad() {
			Object.assign(this.data, this.$options.data().data)
			this.getData()
			this.getRules()
		},
		onPullDownRefresh() {
			let _this = this
			_this.page = 1
			_this.data.tableData = []
			setTimeout(function() {
				uni.showToast({
					title: "刷新成功",
					icon: "none"
				})
				// 恢复初始状态
				// Object.assign(_this.data, _this.$options.data().data)
				_this.getData()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {

			/**
			 * 获取推荐记录
			 */
			async getData(page = 1, limit = 20) {
				try {
					let res = await this.$http.post('/index/Cleanerindex/recommend_record', {
						page,
						limit
					})
					this.work_people_num = res.work_people_num
					this.total_money = res.total_money
					this.data.tableData = res.data
					this.data.total = res.total
					this.state = this.data.tableData.length
					console.log('this.data.tableData', this.data.tableData)
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			/**
			 * 获取活动规则
			 */
			async getRules(){
				try{
					let res = await this.$http.get('/index/Communal/config_data',{config_id:8})
					this.rulesValue = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 点击加载更多组件时触发
			 * @param {Object} e 点击时的状态
			 */
			async loadClick(e) {
				console.log('eee', e)
				if (e.detail.status == 'no-more') return this.data.status = "no-more"
				this.data.status = "loading"
				this.data.page += 1
				try {
					let rep = await this.$http.post('/index/Cleanerindex/recommend_record', {
						page: this.data.page,
						limit: 20,
					})
					this.data.tableData = [...this.data.tableData, ...rep.data]
					if (this.data.page >= rep.last_page) return this.data.status = 'no-more'
					console.log('当前分页', this.data.page)
					this.data.status = 'more'
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			// 查看详情
			cleanerWorkRecord(id) {
				this.cleaner_id = id
				const params = {
					cleaner_id: id,
					page: 1,
					limit: 6
				}
				this.$refs.recommendPopup.open()
				this.$http.post('/index/Cleanerindex/cleaner_work_record', params).then(res => {
					this.cleanerWorkList = res.data
				})
			},
			/**
			 * 详情列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore1(e) {
				console.log('eee', e)
				if (e.detail.status == 'no-more') return this.data1.status = "no-more"
				this.data1.status = "loading"
				this.data1.page += 1
				try {
					let rep1 = await this.$http.post('/index/Cleanerindex/cleaner_work_record', {
						page: this.data1.page,
						limit: 6,
						cleaner_id: this.cleaner_id,
					})
					this.cleanerWorkList = [...this.cleanerWorkList, ...rep1.data]
					if (this.data1.page >= rep1.last_page) return this.data1.status = 'no-more'
					console.log('当前分页', this.data.page)
					this.data1.status = 'more'
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			recommendPopupChange(e) {
				this.show = e.show;
				if (!e.show) {
					this.data1.page = 1;
					this.data1.status = 'more'
					// this.houseList = []
				}
			},
		}
	}
</script>

<style lang="scss">
	// 活动规则样式
	.m-r-a-recruits {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		border: 1rpx solid #EC331B;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 28rpx;
		.a-r-title {
			width: 100%;
			min-height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 26rpx;
			.lin {
				flex: 1;
				height: 2rpx;
				background-color: #FF9F9F;
			}
			.r-t-text {
				width: 236rpx;
				margin: 0 20rpx;
				border: 1rpx solid #EC331B;
				min-height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #E22626;
				border-radius: 28rpx;
			}
		}
		// 规则样式
		.a-r-recruits {
			width: 100%;
			.r-com {
				display: flex;
				.r-c-text {
					line-height: 1.8em;
					font-size: 24rpx;
					font-weight: 500;
					color: #6C6C6C;
				}
			}
		}
		// 梯度表样式
		.a-r-table {
			width: 100%;
			.bg {
				background-color: #FFE6E6;
			}
			.r-t-th {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 44rpx;
				.r-t-text {
					flex: 1;
					font-size: 24rpx;
					font-weight: 600;
					color: #EC331B;
					text-align: center;
				}
			}
			.r-t-td {
				.r-t-text {
					font-weight: 500;
					color: #EC331B;
				}
			}
		}
		// 扫码样式
		.a-r-img {
			width: 170rpx;
			height: 170rpx;
			.r-img {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.my-recommend {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 32rpx;
		overflow: hidden;
		.a-r-recruits {
			width: 100%;
			.r-com {
				display: flex;
				.r-c-text {
					line-height: 1.8em;
					font-size: 24rpx;
					font-weight: 500;
					color: #6C6C6C;
				}
			}
		}
		// 日期状态选择栏样式
		.m-r-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			padding: 32rpx 0;
			margin-bottom: 32rpx;

			.b-tag {
				// margin-bottom: 70rpx;
				display: flex;
				width: 100%;
				justify-content: space-around;
				align-items: center;

				&-son {
					flex: 1;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;

					&-top {
						margin-bottom: 15rpx;

						text {
							font-size: 50rpx
						}
					}

					&-bottom {
						text {
							font-size: 30rpx;
							font-weight: 400;
							color: #757575;
						}
					}
				}

				&-son1 {
					border-right: 2rpx solid #EDEDED;
				}
			}

			.m-r-com {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;

				.r-c-box {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;

					.c-b-text {
						font-size: 54rpx;
						font-weight: 600;
						color: #53E48D;
						margin-bottom: 34rpx;
					}

					.c-b-text1 {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						white-space: nowrap;
					}
				}
			}
		}

		// 表格样式
		.m-r-card1 {
			display: flex;
			flex-direction: column;
			flex: 1;
			box-sizing: border-box;
			width: 100%;
			padding: 32rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			.r-c-th {
				height: 68rpx;
				border-radius: 8rpx;
				background-color: #F9F9F9;

				.uni-row {
					.uni-col {
						line-height: 68rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: rgba($color: #000000, $alpha: 0.9);
						text-align: center;
					}
				}
			}

			.r-c-td {
				flex: 1;
				border-radius: 8rpx;
				overflow: auto;

				.uni-row {
					.uni-col {
						line-height: 80rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: rgba($color: #000000, $alpha: 0.7);
						text-align: center;
						border-bottom: 1rpx solid #F6F6F6;
					}
				}
			}
		}
	}

	// 弹框样式
	.popup {

		// padding: 18rpx;
		.popup-box {
			.popup-auto {
				max-height: 70vh;
				// width: 520rpx;
				overflow: auto;
			}

			.zanwu {
				margin: 40rpx 0rpx;
				text-align: center;
				font-weight: bold;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 40rpx;
			}

			.uni-card {
				margin: 0 !important;
				padding: 0 !important;
			}
		}

		.recommendPopup-title {
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			width: 50vh;
			background-color: #F9F9F9;
			color: #000;
			font-weight: bold;
			font-size: 36rpx;

			.hotelName,
			.workTime {
				flex: 1;
				margin-left: 30rpx;
			}
		}

		.popup-content {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			&-son {
				flex: 1;
				margin-left: 30rpx;
			}
		}
	}
</style>
